<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
<script src="jquery.webticker.js"></script>

<link rel="stylesheet" href="${initParam.root }/css/tabs.css">
<link rel="stylesheet" href="${initParam.root }/css/board2.css">
<link rel="stylesheet" href="${initParam.root }/css/slide.css">

<script type="text/javascript">
var step=1;
var whichimage=1;
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src");
whichimage=step;
if (step<2)
step++;
else
step=1;
setTimeout("slideit()",1800);
}

function slidelink(){
if (whichimage==1)
window.location="";
else if (whichimage==2)
window.location="view.do?head=testInfo&type=reply&category=community";
else if (whichimage==3)
window.location="view.do?head=video&type=reply&category=learning";
}
</script> 


    <script type="text/javascript">
    $(document).ready(function() {
    	slideit();
    	$.ajax({
			type : "post",
			url : "${initParam.root}/recentList.do",
			data:"head=notice",
			datatype:"json",
			success:function(data){
				str="";
				str+="<table class='table-wrapper'><thead><tr><td>Title</td><td>ID</td><td>Date</td></tr></thead>";
				$.each(data,function(index,strr){
					str+="<tr><td><a href='${initParam.root }/board/detail.do?no="+strr.no+"&countView="+strr.countView+"&type=answer' style='color:black;'>"+strr.title+"</a></td><td>"+strr.id+"</td><td>"+strr.writeDate+"</td></tr>";
					//str+=strr.title;
				});
				str+="</table>";
				$("#notice").html(str);
			}
    	});
    	$.ajax({
			type : "post",
			url : "${initParam.root}/ranklist.do",
			data:"method=member",
			datatype:"json",
			success:function(data){
				str="";
				
				str+="<table class='table-wrapper'><thead><tr><td>순위</td><td>Level</td><td>ID</td><td>point</td></tr></thead>";
				$.each(data,function(index,strr){
					str+="<tr><td>"+(index+1)+"</td><td>"+strr.level+"</td><td>"+strr.id+"</td><td>"+strr.point+"</td></tr>";
					//str+=strr.title;
				});
				str+="</table>";
				$("#member").html(str)	;
				
				
			}
    	});
    	
    	$.ajax({
        	type : "post",
    		url : "${initParam.root}/today.do",
    		data:"head=today",
    		datatype:"json",
    		success:function(data){
    			//alert(data[0].title);
    			/* info="<marquee behavior='scroll' direction='left'>"+data[0].title+"</marquee>";
    			$("#todayComment").html(info+"                                           "); */
    			info="<ul id='webticker' style='color: white;'><li>"+data[0].title+"</li><li>"+data[0].content+"</li></ul>";
    			$("#todayComment").html(info);
    			 $('#webticker').webTicker();
    		}
    		
        	
        	
        });//오늘의한마디 ajax
    	
        //$('#webticker').webTicker();
    	
    	
        $('#tabs a').click(function(e) {
        	
        	var haed=$(this).text();
        	$.ajax({
    			type : "post",
    			url : "${initParam.root}/recentList.do",
    			data:"head="+haed,
    			datatype:"json",
    			success:function(data){
    				str="";
    				str+="<table class='table-wrapper'><thead><tr><td>Title</td><td>ID</td><td>Date</td></tr></thead>";
    				$.each(data,function(index,strr){
    					str+="<tr><td><a href='${initParam.root }/board/detail.do?no="+strr.no+"&countView="+strr.countView+"&type=answer' style='color:black;'>"+strr.title+"</a></td><td>"+strr.id+"</td><td>"+strr.writeDate+"</td></tr>";
    					//str+=strr.title;
    				});
    				str+="</table>";
    				$("#"+haed).html(str);
    				
    				
    				
    			}
    		});
            e.preventDefault();        
            $("#content div").hide(); //Hide all content
            $("#tabs li").attr("id",""); //Reset id's
           
            $(this).parent().attr("id","current"); // Activate this
            $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
        });//tabs1 click
   
    
    
    $('#tabs2 a').click(function(e) {
    	
    	var method=$(this).text();
    	$.ajax({
			type : "post",
			url : "${initParam.root}/ranklist.do",
			data:"method="+method,
			datatype:"json",
			success:function(data){
				str="";
				if(method=="member")
					{
					
				str+="<table class='table-wrapper'><thead><tr><td>순위</td><td>Level</td><td>ID</td><td>point</td></tr></thead>";
				$.each(data,function(index,strr){
					str+="<tr><td>"+(index+1)+"</td><td>"+strr.level+"</td><td>"+strr.id+"</td><td>"+strr.point+"</td></tr>";
					//str+=strr.title;
				});
				str+="</table>";
				$("#"+method).html(str)	;
					}
				else 
					{
					
				str+="<table class='table-wrapper'><thead><tr><td>순위</td><td>GroupName</td><td>총인원</td><td>그룹장</td></tr></thead>";
				$.each(data,function(index,strr){
					str+="<tr><td>"+(index+1)+"</td><td>"+strr.gname+"</td><td>"+strr.amount+"</td><td>"+strr.gleader+"</td></tr>";
					//str+=strr.title;
				});
				str+="</table>";
				$("#"+method).html(str)	;
					}
				
				
				
			}
		});
        e.preventDefault();        
        $("#content2 div").hide(); //Hide all content
        $("#tabs2 li").attr("id",""); //Reset id's
       
        $(this).parent().attr("id","current2"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    });//tabs2 click
    
    
  
});
    </script>	

<script type="text/javascript">
var image1=new Image()
image1.src="${initParam.root }/image/main1.png";
var image2=new Image()
image2.src="${initParam.root }/image/main2.png";

</script>

<div  ><span  style="float:left: ;" id="todayComment"></span></div>

<div><br><br></div>
<div style="margin-bottom:50px">
<a href="javascript:slidelink()">
<img  src="${initParam.root }/image/main1.png" name="slide" border="0" width="800" height="250" /></a>
</div>
<div style="float:left;">
<ul id="tabs" >
    <li><a href="#" title="notice">notice</a></li>
    <li><a href="#" title="testInfo">testInfo</a></li>
    <li><a href="#" title="today">today</a></li>  
</ul>

<div  id="content"> 
    <div id="notice"></div>
    <div id="testInfo" ></div>
    <div id="today"></div>

</div>
</div>
<div style="float:right;">
<ul id="tabs2"  >
    <li><a href="#" title="member">member</a></li>
    <li><a href="#" title="group">group</a></li>
    
</ul><br><br>

<div id="content2" > 
    <div id="member"></div>
    <div id="group" ></div>

</div>
</div>